import { useNavigate } from 'react-router-dom';
import './index.css'
import React, { useState } from 'react';
import {
    AppstoreOutlined, MailOutlined, MenuFoldOutlined,
    MenuUnfoldOutlined, UserOutlined, ContainerOutlined,
    DesktopOutlined, PieChartOutlined, DownOutlined
} from '@ant-design/icons';
import { Menu, Col, Row, Card, Content, Avatar, Button, Dropdown, Space, Typography } from 'antd';
import {
    FundTwoTone, HighlightTwoTone, PieChartTwoTone, AlertOutlined
} from '@ant-design/icons';
import { IconNotification  } from '@arco-design/web-react/icon';

const itemstwo = [
    {
        key: '1',
        icon: <PieChartOutlined />,
        label: '软件分析',
    },
    {
        key: '2',
        icon: <DesktopOutlined />,
        label: '软件标识展示',
    },
    {
        key: 'sub1',
        label: '软件标识增删改查',
        icon: <ContainerOutlined />,
        children: [
            {
                key: '5',
                label: 'Option 5',
            },
            {
                key: '6',
                label: 'Option 6',
            },
            {
                key: '7',
                label: 'Option 7',
            },
            {
                key: '8',
                label: 'Option 8',
            },
        ],
    },
    {
        key: 'sub2',
        label: 'Navigation Two',
        icon: <AppstoreOutlined />,
        children: [
            {
                key: '9',
                label: 'Option 9',
            },
            {
                key: '10',
                label: 'Option 10',
            },
            {
                key: 'sub3',
                label: 'Submenu',
                children: [
                    {
                        key: '11',
                        label: 'Option 11',
                    },
                    {
                        key: '12',
                        label: 'Option 12',
                    },
                ],
            },
        ],
    },
];
const items = [
    {
        key: '1',
        label: '切换账号',
        icon: <AppstoreOutlined />,
    },
    {
        key: '2',
        label: '切换账号',
        icon: <AppstoreOutlined />,
    },
    {
        type: 'divider',
    },
    {
        key: '3',
        label: '切换账号',
        icon: <AppstoreOutlined />,
    },
];
const Homepage = () => {
    const [current, setCurrent] = useState('1');
    const onClick = (e) => {
        console.log('click ', e);
        setCurrent(e.key);
    };
    const [collapsed, setCollapsed] = useState(false);

    const toggleCollapsed = () => {
        setCollapsed(!collapsed);
    };
    return <div>
        <div className='menu-demo'>
            {/* <div>
                <span>hhh</span>
            </div> */}
            <Row>
                <div style={{ width:1255 }}></div>
                <div span={3} style={{ color: '#173de7cc', fontSize: '16px', width: 10 }}>&nbsp;<AlertOutlined /></div>
                <div style={{ width: 110 }}> 
                    <Dropdown
                        menu={{
                            items,
                            selectable: true,
                            defaultSelectedKeys: ['3'],
                        }}
                    >
                        <Typography.Link>
                            <Space wrap size={6}>
                                <Avatar size={34} icon={<UserOutlined />} />
                                <DownOutlined />
                            </Space>
                        </Typography.Link>
                    </Dropdown>
                    </div>
            </Row>
        </div>
        <div style={{ width: 278 }}>
            <Button type="primary" onClick={toggleCollapsed} style={{ marginBottom: 10,width:50,marginLeft:5 }}>
                {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            </Button>
            <Menu
                className="sidebar"
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                mode="inline"
                inlineCollapsed={collapsed}
                items={itemstwo}   
                style={{ fontSize:16 }}
            />
        </div>
        <div className="content">
            <Card className="software-info" variant="borderless" style={{ height: 130 }}>
                <Avatar size={64} icon={<UserOutlined />} />
                <span style={{ fontSize: '23px' }}>&nbsp;&nbsp;软件A </span>
            </Card>
            <div class="tab">
                <button class="tablinks" >软件标识</button>
                <button class="tablinks">SBOM配件目录</button>
                <button class="tablinks">漏洞分析数据</button>
            </div>
            <div className="tabcontent">
                <p>软件标识详细信息：这是软件A的标识信息。</p>
            </div>
        </div>
    </div>

}
export default Homepage